Back
undefined
Skip navigation
Search
Create
9+
undefined

Home
Explore
Subscriptions
Library
History
Your videos
Watch later
css
Show more
Show less

Subscriptions

CHILLAF
R y a n C e l s i u s ° S o u n d s
1SickMusic1
A24
Aaron and Claire
Abby Collier
abetweene
Show 733 more
Show less

More from YouTube

YouTube Premium
Movies & Shows
Gaming
Live
Fashion & Beauty
Learning
Sports

Settings
Report history
Help
Send feedback
AboutPressCopyrightContact usCreatorsAdvertiseDevelopers
TermsPrivacyPolicy & SafetyHow YouTube worksTest new features
© 2021 Google LLC

Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial
Suggested: 3D Photo Effect from 1 Image JavaScript Tutorial
If playback doesn't begin shortly, try restarting your device.
4:03
0:00
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
Up next
Live
Upcoming
Play Now
Three.js Realistic Lighting Setup Tutorial
10:17
3D Photo Effect from 1 Image JavaScript Tutorial
4:30
Red Stapler
SUBSCRIBE
SUBSCRIBED
Switch camera
Share
An error occurred while retrieving sharing information. Please try again later.
From Red Stapler
4:30

3D Photo Effect from 1 Image JavaScript Tutorial

  • by Red Stapler
  • 165,300 views
redstapler.co

Get Source Code

Get Source Code 
0:00
5:56
2:57 / 5:56
#3DModel #ThreejsTutorial #WebDesign

Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial

240,942 views • May 28, 2019 • How to add 3D model with 360 degrees view on website with JavaScript and Three.js in 5 minutes! Source Code: https://redstapler.co/add-3d-model-to... Three.js Crash Course: https://youtu.be/uzkedMF-l4Q GLTFLoader.js: https://git.io/fjRPL OrbitControl.js: https://git.io/fjRPt Car Model: https://skfb.ly/6HpEG === Follow us on === Facebook: https://www.facebook.com/theRedStapler Website: http://redstapler.co/ Twitter: https://twitter.com/redStapler_twit #3DModel #ThreejsTutorial #WebDesign
Show less
Show more
5.7K
110
Share
Save
5.7K
110
Share
Save
Red Stapler
Red Stapler
Verified
161K subscribers
Subscribe
#3DModel #ThreejsTutorial #WebDesign

Add 3D Model to WebSite in 5 Minutes - Three.js Tutorial

240,942 views240K views
May 28, 2019
5.7K
110
Share
Save
5.7K
110
Share
Save
5,763 / 110
Red Stapler
Red Stapler
Verified
161K subscribers
Subscribe
How to add 3D model with 360 degrees view on website with JavaScript and Three.js in 5 minutes! Source Code: https://redstapler.co/add-3d-model-to... Three.js Crash Course: https://youtu.be/uzkedMF-l4Q GLTFLoader.js: https://git.io/fjRPL OrbitControl.js: https://git.io/fjRPt Car Model: https://skfb.ly/6HpEG === Follow us on === Facebook: https://www.facebook.com/theRedStapler Website: http://redstapler.co/ Twitter: https://twitter.com/redStapler_twit #3DModel #ThreejsTutorial #WebDesign
Show less Show more

303 Comments

Sort comments
Sort by
Top comments
Newest first
Jennifer Tran
Add a public comment...
Abażur

Abażur

2 years ago •
could you make a whole series about three js ?
Show less Read more
2 years ago
104
Like
104
❤ by Red Stapler
Reply
View 3 replies
Hide 3 replies
Omar

Omar

2 years ago •
From beginner to advanced. I would definitely be watching them all!
Show less Read more
2 years ago
8
8
Reply
Kaybe - Cryptosphere

Kaybe - Cryptosphere

2 years ago •
Here for ya bra: https://www.youtube.com/watch?v=ABV1mK1CGOY
Show less Read more
2 years ago
2
2
Reply
Abażur

Abażur

2 years ago •
but its very basic
Show less Read more
2 years ago
2
2
Reply
Bram Stultjens

Bram Stultjens

6 months ago •
I love the Christmas piano music in the background
Show less Read more
6 months ago
3
3
Reply
Promise

Promise

2 years ago •
Bro, you took my development skills to the next level, thank you ♥️
Show less Read more
2 years ago
46
46
Reply
Babu Gandhi

Babu Gandhi

1 year ago •
How to replace GLTFloader with OBJloader ? Please guide with the code for the same webpage
Show less Read more
1 year ago
8
8
Reply
Ozosh Maharjan

Ozosh Maharjan

2 years ago (edited) •
Ooooohhhhh thank you so much. I needed this. 😊
Show less Read more
2 years ago (edited)
0
0
Reply
Matthew Tang

Matthew Tang

5 months ago (edited) •
// For someone you start this tutorial after Jan 15, 2021 ; you may follow this update on the lines of codes. // I have put 3 lines of codes form the bottom to line 22-24 as to define the "renderer.domElement" // I have updated line 27 and added "renderer.domElement", as it's required based on the the document. // This is the first time for a marketer to try new fancy techs, pls let me know if this can help. Thanks all :D ! <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <script src="three.min.js"></script> <script src="GLTFLoader.js"></script> <script src="OrbitControls.js"></script> <script> let scene, camera, renderer; function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0xdddddd); camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000); camera.rotation.y = 45/180*Math.PI; camera.position.x = 800; camera.position.y = 100; camera.position.z = 1000; renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); controls = new THREE.OrbitControls(camera,renderer.domElement); controls.addEventListener('change', renderer); hlight = new THREE.AmbientLight (0x404040,100); scene.add(hlight); directionalLight = new THREE.DirectionalLight(0xffffff,100); directionalLight.position.set(0,1,0); directionalLight.castShadow = true; scene.add(directionalLight); light = new THREE.PointLight(0xc4c4c4,10); light.position.set(0,300,500); scene.add(light); light2 = new THREE.PointLight(0xc4c4c4,10); light2.position.set(500,100,0); scene.add(light2); light3 = new THREE.PointLight(0xc4c4c4,10); light3.position.set(0,100,-500); scene.add(light3); light4 = new THREE.PointLight(0xc4c4c4,10); light4.position.set(-500,300,500); scene.add(light4); let loader = new THREE.GLTFLoader(); loader.load('scene.gltf', function(gltf){ car = gltf.scene.children[0]; car.scale.set(0.5,0.5,0.5); scene.add(gltf.scene); animate(); }); } function animate() { renderer.render(scene,camera); requestAnimationFrame(animate); } init(); </script> </body> </html>
Show less Read more
5 months ago (edited)
33
33
Reply
View 11 replies Hide 11 replies
Show more replies
Dawid Furdzik

Dawid Furdzik

1 year ago •
Thank you sir. One more question, how to do dynamic 3d model? I mean, input on website few parameters and output 3d model, something like online product configurator is it possible?
Show less Read more
1 year ago
2
2
Reply
Bruh Bruh

Bruh Bruh

2 years ago •
One of favourite web development channel. Thank u so much.
Show less Read more
2 years ago
4
4
Reply

Pavel Arseyev

1 year ago •
thanks a lot! This video helped me so much!
Show less Read more
1 year ago
0
0
Reply

aLuuffySV

4 days ago •
Great stuff, is there a way to add customization option to the model? i.e, have colors change and stuff while the model is being panned/rotated around?
Show less Read more
4 days ago
0
0
Reply

Camilo Laiton

11 months ago •
Hi, thank you! Great tutorial. I have a question, any of you guys know how to add text on a 3d model in threejs? I would really appreciate if someone helps me with that.
Show less Read more
11 months ago
1
1
Reply

John Gearhart

11 months ago •
God-sent tutorial!!! made mine work!
Show less Read more
11 months ago
0
0
Reply

Catherine Liu

1 year ago •
great tutorial!!!!! hope more to come!!!
Show less Read more
1 year ago
1
1
Reply

Ricardo Siabato

7 months ago (edited) •
awesome! you could integrate an example of these into a real site!Saludos desde Colombia! :)
Show less Read more
7 months ago (edited)
0
0
Reply

apoorvareddy

1 year ago •
can we upload a 3D model and add different functions to different parts of the model?
Show less Read more
1 year ago
1
1
Reply

Александр Андреев

2 years ago •
You are awesome! Thank you for lesson, from Moscow :)
Show less Read more
2 years ago
6
6
❤ by Red Stapler
Reply

iammikedeleon

6 months ago •
How can I add the 3D on WP? Can you share some tutorials to it?
Show less Read more
6 months ago
0
0
Reply

Shreeram VT

11 months ago •
Can we do selection on a specific portion in the 3D model, is that possible via three.js? Eg: I select the eye, nose, ears and like that?
Show less Read more
11 months ago
0
0
Reply

Todor Pavlovic

2 years ago •
Great man !
Show less Read more
2 years ago
0
0
Reply

Everest Gjonaj

2 years ago •
Looking down for more threejs tutorials.
Show less Read more
2 years ago
0
0
Reply

Transcript

NaN / undefined
All 3D computer graphics Computer program Related Watched
1:25:25 Now playing

After Effects character animation workflow

Emanuele Colombo
Emanuele Colombo
•
15M views 4 years ago
8:03:01 Now playing

Night Chill: Lofi Jazzhop Mix for Chill Out

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
15K views 2 days ago
New
1:09:16 Now playing

The Brian Jonestown Massacre - Take it from the Man! (Full Album)

Captain Beefart
Captain Beefart
•
710K views 7 years ago
Now playing

FRIDAY MORNING JAZZ: Relax Bossa Nova Jazz and Positive Morning Music

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
1K watching
LIVE NOW
2:54:11 Now playing

The Very Best of Jazz Divas Billie Holiday, Ella Fitzgerald, Mildred Bailey

頭がよくなる
頭がよくなる
•
490K views 1 year ago
45:29 Now playing

where is everyone ? | a dreamcore/weirdcore playlist

【S】【O】【A】【N】
【S】【O】【A】【N】
•
216K views 1 month ago
Now playing

Popular Songs but they are extra chill | LIVE 24/7 RADIO 🔴 | CHILLAF |

CHILLAF
CHILLAF
•
76 watching
LIVE NOW
4:00:28 Now playing

☕️French Café - Autumn Jazz Cafe Music - Relaxing Bossa Nova Music

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
908K views 1 year ago
3:17:48 Now playing

Lofi hip hop mix ~ Chill Vibes & Aesthetic Music (3 hours)

chilli music
chilli music
•
878K views 2 months ago
3:23:41 Now playing

Hozho • Paul Kalkbrenner • Boris Brejcha • Kachli (Code Mix)

Code
Code
•
631K views 2 months ago
Now playing

Relaxing Jazz: Fascinating Coffee Jazz Music - Elegant Jazz Music for Working, Studying

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
2.1K watching
LIVE NOW
5:10:58 Now playing

Relaxing Whiskey Blues Music | Top Blues Music Of All Time

JAZZ & BLUES
JAZZ & BLUES
•
301K views 4 weeks ago
3:21:25 Now playing

HOUSE 10 (100k Subs Lo-Fi House Mix)

Kiffen Beats
Kiffen Beats
•
1.2M views 8 months ago
1:15:18 Now playing

Idris Ackamoor ☥ The Pyramids ‎– Shaman! (2020 - Album)

2666 - The Art Of Listening
2666 - The Art Of Listening
•
72K views 5 months ago
8:00:00 Now playing

Elegant Blues - Smooth Blues Guitar and Piano Music - Relax Instrumental Blues

Blues Lounge
Blues Lounge
•
102K views 2 months ago
3:05:12 Now playing

CHILL DRIVE

MODY
MODY
•
24K views 1 week ago
3:33:09 Now playing

Relaxing Jazz Music - Background Chill Out Music - Music For Relax,Study,Work

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
61M views 4 years ago
2:52:47 Now playing

Chill Drive - Lofi hip hop mix ~ Stress Relief, Relaxing Music

chilli music
chilli music
•
3M views 1 month ago
Now playing

JUTESETS - 'Jazz Trip' & 'Space Forest' 24/7 Live Radio - Relaxing Jazz Music

Cafe Music BGM channel
Cafe Music BGM channel
Official Artist Channel
•
148 watching
LIVE NOW
2:02:08 Now playing

Deep Within The Forest 2 🍀Chill Lofi HipHop Mix

Dreamhop Music
Dreamhop Music
•
276K views 1 month ago
Show more
Experiencing interruptions?
Find out why

NaN / undefined